<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>
<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  div{
    border:4px solid red;
    margin-top: 100px;
    margin-bottom: 100px;
  }
  section{
    height: 200px;
    position: relative;
  }
  .cover {
    position: absolute;
    /* left: 0;right: 0;top: 0;bottom: 0代表上下左右拉伸，由于是基于section定位所以这里滤镜是覆盖section元素，如果是基于body定位，滤镜是覆盖整个浏览器窗口 */
    left: 0;right: 0;top: 0;bottom: 0;
    background-color: #fff;
    opacity: .5;filter: alpha(opacity=50);
}
.common{
  position: absolute;
  top: 0;
}

article{
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}
article span{
  position: absolute;
}
</style>
<body>
 
  <!-- <span class="common" style="background: yellow;">4444444444444444444444444444444444444</span>
  <span class="common" style="background: red;">333333333333333333333</span>
  
  <div style="clear:both">
    <span>我是一个绝对定位的absolute元素</span>
    <img style="float: left;width:100px;" src="404.png" />
  </div>
 
  <div style="position: relative;">
    <span>我是一个绝对定位的absolute元素</span>
    <img style="position: absolute;width:100px;top:20px" src="404.png" />
  </div>

  <section>
    <span class="cover"></span>
    <p style="float:left;width:100px">1111111111</p>
    <p style="float:left;width:calc(100vw - 200px)">222222222</p>
    <p style="float:right;width:100px">3333333333333</p>
  </section>

  <article>
     <span>222222222</span>
  </article> -->
  <footer>1111111111111</footer>
</body>
<script>
  // 说明dom修改是同步的，dom渲染发生在当前宏任务执行完毕，并且所有由此产生的微任务也执行完毕后，下一次宏任务开始之前(https://blog.csdn.net/m0_37756431/article/details/135272473)
  // 实际上dom渲染时机可能会受到浏览器优化策略的影响。例如，浏览器可能会尝试在适当的时机合并多个渲染操作，以减少重绘和重排的次数，从而提高性能，
  //然而，从事件循环的角度来看，DOM渲染通常发生在微任务队列清空之后、下一次宏任务开始之前。
   
    document.querySelector("footer").innerHTML = 'footer'
    console.log(document.querySelector("footer").innerHTML)
    Promise.resolve().then(()=>{
      alert("微任务")
    }) 
    setTimeout(()=>{
      alert("宏任务")
    },0)
</script>
</html>
